import {AtIcon} from "taro-ui";
import {View} from '@tarojs/components';
import React, { useState } from 'react';
import LiveCode from "../../../components/liveCode/liveCode";
import '../../../components/liveCode/liveCode.scss'
import './detail-bar.scss';

interface DetailBarType {
  showService?: boolean
  qrImg?: any
  onGotoHome?: any
  qrImgDescribe?: any
  onGetPoster?: any
}

const OtherBar: React.FC<DetailBarType> = (props) => {
  const [modalShow, setModalShow] = useState(false);
  return (
    <View className='detailBar'>
      <View className='service-box'>
        <View className='service-item goto-home' onClick={props.onGotoHome}>
          <View className='home'><AtIcon value='icon icon-shouye-01' size='20' color='#000' /></View>
          <View className='text'>首页</View>
        </View>
        {props.showService && <View className='service-item goto-service' onClick={() => {
          setModalShow(true)
        }}
        >
          <View className='kefu'><AtIcon value='icon icon-kefu-01' size='20' color='#000' /></View>
          <View className='text'>客服</View>
        </View>}
        {process.env.SHOW_SHARE_POSTER &&
        <View className={`service-item ${!props.showService && 'no-kefu'}`} onClick={props.onGetPoster}>
          <View className='kefu'>
            <AtIcon value='icon icon-fenxiang-01-01' size='20' color='#000' />
          </View>
          <View className='text'>分享</View>
        </View>}
      </View>
      {modalShow &&
      <LiveCode subTitle='添加您的专属顾问微信，' secondSubTitle='有任何问题将在第一时间回复' qrImg={props.qrImg} modalShow={modalShow}
        onClose={() => {
                  setModalShow(false)
                }} title={props.qrImgDescribe}
      />
      }
    </View>
  )
}
OtherBar.defaultProps = {
  showService: true,
  qrImgDescribe: '',
  qrImg: ''
}

export default OtherBar
